<div class="from-markdown">
	<h1>{{ title }}</h1>
</div>

<form class="mt-8" action="/api/method/wiki.wiki.doctype.wiki_page.wiki_page.new" method="POST">
	<input class="d-none" type="text" name="csrf_token" value="{{ frappe.session.csrf_token }}">
	<div class="form-group">
		<label for="title">Title</label>
		<input id="title" class="form-control" type="text" name="title" placeholder="Page Title">
	</div>
	<div class="form-group">
		<label class="sr-only" for="content">Content</label>
		<ul class="nav nav-tabs" role="tablist">
			<li class="nav-item" role="presentation">
				<a class="nav-link active" id="write-tab" data-toggle="tab" href="#write" role="tab"
					aria-controls="write" aria-selected="true">Write</a>
			</li>
			<li class="nav-item" role="presentation">
				<a class="nav-link" id="preview-tab" data-toggle="tab" href="#preview" role="tab"
					aria-controls="preview" aria-selected="false">Preview</a>
			</li>
		</ul>
		<div class="mt-4 tab-content">
			<div class="tab-pane fade show active" id="write" role="tabpanel" aria-labelledby="write-tab">
				<textarea id="content" class="form-control wiki-content" name="content" rows="30"></textarea>
			</div>
			<div class="tab-pane fade" id="preview" role="tabpanel" aria-labelledby="preview-tab">
				<div class="from-markdown wiki-preview"></div>
			</div>
		</div>
	</div>
	<button type="submit" class="btn btn-primary">Create Page</button>
</form>

{%- block script -%}
<script>
	frappe.ready(() => {
		$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
			let activeTab = $(e.target);

			if (activeTab.prop('id') === 'preview-tab') {
				let content = $('textarea#content').val();
				let $preview = $('.wiki-preview');
				$preview.html('Loading preview...');
				frappe.call('wiki.wiki.doctype.wiki_page.wiki_page.preview', { content })
					.then(r => {
						if (r.message) {
							$preview.html(r.message);
						}
					});
			}
		})
	})
</script>
{%- endblock -%}
